<template>
<div class="codemirror-box">
  <div class="codemirror-header"><i class="icon zbs-code"></i></div>
  <codemirror
    @click="openDialog"
    v-model="modelValue"
    placeholder="Code gose here..."
    :style="style"
    :autofocus="true"
    :indent-with-tab="true"
    :tabSize="4"
    :disabled="true"
    :extensions="extensions"
    
  />
  <!-- @ready="log('ready', $event)"
    @change="log('change', $event)"
    @focus="log('focus', $event)"
    @blur="log('blur', $event)" -->
  <el-dialog v-model="visible" @close="closeDialog" title="代码编辑" width="80%">
    <codemirror
      v-model="modelValue"
      placeholder="Code gose here..."
      :style="{ height: 'calc(70vh - 114px)', width: '100%' }"
      :autofocus="true"
      :indent-with-tab="true"
      :tabSize="4"
      :disabled="false"
      :extensions="extensions"
      @change="codeChange"
    />
     <!-- @ready="log('ready', $event)"
      @change="codeChange"
      @focus="log('focus', $event)"
      @blur="log('blur', $event)" -->
    <template #footer>
      <span>
        <el-button @click="visible = false">Cancel</el-button>
        <el-button type="primary" @click="confirmClick"
          >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>
</div>
  
</template>

<script setup>
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";

import { ref } from "vue";

const log = console.log;
const extensions = [javascript(), oneDark];
const visible = ref(false);
const emit = defineEmits(["update:modelValue"]);
const prop = defineProps({
  modelValue: {
    type: String,
    default: "ces",
  },
  style:{
    type:Object,
    default:() => {
      return {width:'100%',height:'100px'}
    }
  }
});
const codeValue = ref('')
const openDialog = () =>{
  visible.value = true
  codeValue.value = prop.modelValue
}
const codeChange = (val) => {
  codeValue.value = val
}
const closeDialog = () => {
  emit("update:modelValue",codeValue.value)
}
const confirmClick = () => {
  visible.value=false
}
</script>
<style lang="less" scoped>
.codemirror-box{
  padding: 5px 5px 5px 5px;
  background: white;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  .codemirror-header{
    height: 20px;
  }
}
</style>
